<template>
	<view class="device-list">
		<searchBar @confirmSearch="confirmSearch" @clearSearch="clearSearch" placeholder="输入设备SN号搜索设备"
			v-model="searchSNNumber" />
		<!-- <custom-tabs type="c1" :value="current" @change="change" :tabSpacing="36"> -->
		<!-- <custom-tab-pane style="width:100%" :label="item.label" name="c1_2" v-for="item,index in tabList" -->
		<!-- :key="index"> -->
		<scroll-view scroll-y class="scroll-view" @scrolltolower="scrolltolower">
			<view class="list-wrapper">
				<deviceItem v-for="item in deviceList.list" :key="item.id" :detail="item"
					@changeDevieItemActive="changeDevieItemActive" />
			</view>
			<g-placeholder v-if="deviceList.loading_status === LOADING_STATUS.NOMORE&&!deviceList.list.length"/>
			<uni-load-more :status="deviceList.loading_status" v-else/>
		</scroll-view>
		<operationBar v-bind="$attrs" :deviceList="deviceList.list" @changeAllSelect="changeAllSelect"
			:isAllSelectChecked="isAllSelectChecked" />
		<!-- </custom-tab-pane> -->
		<!-- </custom-tabs> -->
	</view>
</template>

<script lang="ts" setup>
	import deviceItem from '../device-item/deviceItem';
	import operationBar from '../operation-bar/operationBar';
	import { computed, reactive, Ref, ref } from 'vue';
	// import { ITab } from './types';
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import searchBar from '../search-bar/searchBar.vue';
	import { IDeviceList, IGetDeviceListResult, IDeviceListExpose } from './types';
	import REST_URL from '@/http/http.restUrl';
	import { onLoad } from '@dcloudio/uni-app';
	import { IDevice } from '../device-item/types';

	const current : Ref<number> = ref(0);

	const searchSNNumber : Ref<string> = ref('');

	// const tabList = reactive([
	// 	{
	// 		label: '可下发',
	// 		value: 1,
	// 		loading_status: LOADING_STATUS,
	// 		pageNum: 1,
	// 		pageSize: 10,
	// 		list: [],
	// 	},
	// 	{
	// 		label: '全部',
	// 		// value : ORDER_STATUS,
	// 		loading_status: LOADING_STATUS,
	// 		pageNum: 1,
	// 		pageSize: 10,
	// 		list: [],
	// 	},
	// ])

	const deviceList : IDeviceList = reactive({
		pageNum: 1,
		pageSize: 10,
		loading_status: LOADING_STATUS.MORE,
		list: [],
	})

	// const activeDeviceList : Ref<IDevice[]> = ref([]);

	// const isDeviceItemActive = computed(() => {
	// 	return (id : number) => {
	// 		return activeDeviceList.value.some((item : IDevice) => item.id === id);
	// 	}
	// })

	const isAllSelectChecked = computed(() => {
		for (let item of deviceList.list) {
			if (!item.active) return false
		}
		return true
	})

	onLoad(async () => {
		await uni.loginManger.$interceptor;
		getDeviceList();
	})

	const getDeviceList = async () : Promise<void> => {
		if (deviceList.loading_status !== LOADING_STATUS.MORE) return;
		deviceList.loading_status = LOADING_STATUS.LOADING;
		const { data, total } : IGetDeviceListResult = (await uni.http.POST(REST_URL.getTransferDeviceList, {
			model_sn: searchSNNumber.value,
			page: deviceList.pageNum,
			page_num: deviceList.pageSize,
		})).data;
		deviceList.list.push(...data);
		deviceList.pageNum++;
		deviceList.loading_status = deviceList.list.length >= total ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;
	}

	const scrolltolower = () => {
		getDeviceList();
	}

	const confirmSearch = () => {
		refreshList();
	}

	const clearSearch = () => {
		refreshList();
	}

	const refreshList = () => {
		deviceList.pageNum = 1;
		deviceList.loading_status = LOADING_STATUS.MORE;
		deviceList.list = [];
		getDeviceList();
	}

	const changeDevieItemActive = (device : IDevice) => {
		for (let item of deviceList.list) {
			if (item.id === device.id) {
				item.active = !item.active;
			}
		}
	}

	const changeAllSelect = () => {
		if (isAllSelectChecked.value) {
			for (let item of deviceList.list) {
				item.active = false;
			}
		} else {
			for (let item of deviceList.list) {
				item.active = true;
			}
		}

	}
	// const change = () => {

	// }
	defineExpose<IDeviceListExpose>({
		refreshList
	})
</script>

<style scoped lang="scss">
	@import "./deviceList.scss";
</style>